<template>
  <div class="animated fadeIn">
    <Card v-for="(order, index) in orderData" :key="index" style="margin: 15px 0;">
      <div slot="title">
        <span class="order-time" v-text="order.createTime"></span>
        <span class="order-number">订单号：<em v-text="order.orderNumber"></em></span>
        <span class="kefu">
          京东
          <Tooltip placement="top" content="联系客服" >
            <Icon type="chatbubble-working"></Icon>
          </Tooltip>
        </span>
      </div>
      <Row v-for="(orderItem, index) in order.orderItems">
        <i-col span="12">
          <div class="prod-info">
            <img :src="orderItem.itemImg" alt="图片"/>
            <span v-text="orderItem.itemName"></span>
          </div>
        </i-col>
        <i-col span="3">
          <div class="receiver-wrapper">
            <span v-text="order.receiver"></span>
            <Icon type="person"></Icon>
          </div>
        </i-col>
        <i-col span="3">
          <div class="receiver-wrapper">
              <p class="price">价格：<em v-text="'￥'+ orderItem.itemPrice"></em></p>
          </div>
        </i-col>
        <i-col span="3">
          <div class="receiver-wrapper">
              <Tag type="dot" closable color="red" v-if="order.status === 1">未发货</Tag>
              <Tag type="dot" closable color="yellow" v-else-if="order.status === 2">已发货</Tag>
              <Tag type="dot" closable color="green" v-else-if="order.status === 3">已签收</Tag>

          </div>
        </i-col>
        <i-col span="3">
          
        </i-col>
      </Row>
    </Card>
  </div>
</template>
<script>
  import fetch from '../../utils/fetch'
  export default{
    data() {
      return{
        orderData:[],
        value1: 0
      }
    },
    created(){
      this.handleGetOrder(0)
    },
    methods:{
      handleGetOrder(currentPage) {
        fetch('/api/order/list?page=' + currentPage).then(response =>{
          if(response.data.success){
            this.orderData = response.data.data.content
          }
        })
      }
    }
  }
</script>
<style scoped lang="scss">


  .order-time {
    display: inline-block;
    width: 200px;
    color: #AAA;
    font-size: 12px;
  }
  .order-number{
    color: #AAA;
    display: inline-block;
    font-size: 12px;
    width: 200px;
    em{
      font-style: normal;
      color: #000;
    }
  }

  .kefu{
    font-size: 10px;
    i{
      font-size: 14px;
      color: green;
      &:hover{
        color: #f63c3a;
        font-size: 20px;
      }
    }
  }

  .prod-info{
    img{
      width: 100px;

    }
    span{
      line-height: 1.5;
      display: inline-block;
      width: 200px;
      font-size: 10px;
      vertical-align: top;
      margin-top: 20px;
      margin-left: 20px;
      &:hover{
        color: red;
        font-size: 12px;
      }
    }
  }
  .receiver-wrapper{
    display: block;
    min-height: 70px;
    border-left: 1px solid #eeeeee;
    text-align: center;
    span{
      display: inline-block;
      font-size: 12px;
      color: #000;
      margin-top: 20px;
    }
    i{
      margin-top: 20px;
      font-size: 15px;
    }
    .price{
      border-bottom: 1px solid #eeeeee;
      margin-top: 20px;
    }

    p{
      font-size: 12px;
      color: #AAA;
      paddding: 5px;
    }

  }
</style>